<template>
  <div class="pad5">
    <div class="flex1 bcf pad5">
      <div class="flrc">
        <title-a class="flex1">审批流程</title-a>
        <mu-button color="primary" icon @click="goback(-1)">
          <mu-icon value="exit_to_app"></mu-icon>
        </mu-button>
      </div>
      <mu-tabs inverse :value.sync="curTab" class="">
        <mu-tab value="flows">审批流程</mu-tab>
        <mu-tab value="view">流程预览</mu-tab>
        <mu-tab value="start" v-if="!model.flows || auth.editAccess">发起/修改审批</mu-tab>
      </mu-tabs>
      <div class="pad5">
        <div class="mart10" v-show="curTab === 'start'">
          <title-a>选择审批流程</title-a>
          <EzData :config="conf" v-model="model"></EzData>
          <div>
            <mu-button color="primary" @click="startApproval">保存</mu-button>
          </div>

        </div>
        <div class="mart10" v-show="curTab === 'view'">
          <title-a>
            <div class="flrc">
              <div class="flex1">流程预览</div>
              <div class="">
                <mu-button flat small color="primary" @click="getFlow">获取</mu-button>
              </div>
            </div>
          </title-a>
          <div class="mart10">
            <mu-stepper v-if="flow.points" orientation="vertical" >
              <mu-step v-for="(item,index) in flow.points" :key="index" :active="true">
                <mu-step-button @click="model.flowIndex = index">{{ item.name }}</mu-step-button>
                <mu-step-content>
                  <div class="flex-r mart10">
                    <div class="flex1" v-if="item.auth.user.length > 0">
                      <title-a>人员</title-a>
                      <div class="mart5">
                        <span v-for="(u,uIndex) in item.auth.user">{{ u.name }}</span>
                      </div>
                    </div>
                    <div class="flex1" v-if="item.auth.department.length > 0">
                      <title-a>部门</title-a>
                      <div class="mart5">
                        <span v-for="(d,dIndex) in item.auth.department">{{ d.name }}</span>
                      </div>
                    </div>
                  </div>
                </mu-step-content>
              </mu-step>
            </mu-stepper>
          </div>
        </div>
        <div class="mart10" v-show="curTab === 'flows'" :key="updateKey">
          <div v-if="(auth.userAccess || auth.departmentAccess || auth.isSuperAdmin) && !model.isConfirm">
            <title-a>{{ model.flowName }}</title-a>
            <div  v-if="model.flowCur">
              <div class="mart5">
                <div v-for="row in model.flowCur.form" :key="row.key">
                  <mu-text-field v-model="row.value" :label="row.name" full-width></mu-text-field>
                </div>
              </div>
              <div class="flrc">
                <div class="padlr5">
                  <mu-select v-model="model.flowCur.finalState" style="width: 100px;" label="审批结果" label-float>
                    <mu-option value="通过" label="通过"></mu-option>
                    <mu-option value="驳回" label="驳回"></mu-option>
                    <mu-option value="取消" label="取消"></mu-option>
                    <mu-option value="完成" label="完成"></mu-option>
                  </mu-select>
                </div>
                <div class="padlr5">
                  <mu-select v-model="model.flowCur.flowTo" style="width: 200px;" label="流转至" label-float>
                    <mu-option :value="item.key" :label="item.name" v-for="(item) in flow.points"
                               :key="item.key"></mu-option>
                  </mu-select>
                </div>
                <div class="flex1">
                  <mu-button color="primary" @click="submit">提交</mu-button>
                </div>
              </div>
              <div class="c12 flex-r flex-wrap flex-start" v-if="model.flowCur">
                <div class="padr10" v-for="item in model.flowCur.next">[ {{item.condition}} > {{item.name}} ]</div>
                <div class="flex1"></div>
              </div>
            </div>
          </div>
          <div v-else-if="!model.isConfirm">
            <div class="mdui-color-orange-50 flrc">
              <mu-icon color="warning" size="32" value="error_outline" class="mar20"></mu-icon>
              <span class="flex1 pad20 c12">尚未流转到当前审批环节</span>
            </div>
          </div>
          <div v-else>
            <div class="mdui-color-green-50 flrc">
              <mu-icon color="warning" size="32" value="error_outline" class="mar20"></mu-icon>
              <span class="flex1 pad20 c12">审批已结束</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div  class="flex1 bcf mart5">
      <ViewCom class="" :model="{id:id}" v-if="id>0" :key="updateKey"></ViewCom>
    </div>
    <div  class="flex1 bcf mart5">
      <div class="pad5">
        <title-a>审批历史记录</title-a>
        <mu-stepper v-if="model.flows" orientation="vertical" class="mart10">
          <mu-step v-for="(item,index) in model.flows" :key="index" :active="true" :completed="true" :disabled="true">
            <mu-step-label @click="model.flowIndex = index">

              <div class="flrc bc13 padtb5 round30 padr10 padl10 mart10 w100">
                <div class="pad c11 fwb">{{ item.name }}</div>
                <div class="flex1 tar padr5 c12 fs8">{{$utils.str2time(item.fillAt)}}</div>
                <div class="mdui-color-green-600 padtb1 padlr9 round30" v-if="item.finalState==='通过'">
                  {{item.finalState}}
                </div>
                <div class="mdui-color-purple padtb1 padlr9 round30" v-else-if="item.finalState==='驳回'">
                  {{item.finalState}}
                </div>
                <div class="mdui-color-pink-600 padtb1 padlr9 round30" v-else-if="item.finalState==='完成'">
                  {{item.finalState}}
                </div>
                <div class="mdui-color-orange-100 padtb1 padlr9 round30" v-else>
                  {{item.finalState}}
                </div>
              </div>
            </mu-step-label>
            <mu-step-content>
              <div class="flex-r mart10">
                <div v-for="row in item.form" class="flrc">
                  <div style="width: 120px;" class="tar c12">{{row.name}}：</div>
                  <div class="flex1 padl5">{{row.value}}</div>
                </div>
              </div>


            </mu-step-content>
          </mu-step>
        </mu-stepper>
      </div>
      <!--      {{auth}}-->
    </div>
  </div>
</template>
<script>
import ViewCom from "@/pages/v1/erp/Need/js/ViewCom.vue";
import TitleA from "@/comps/comm/TitleA.vue";
import apiNeed from "@/pages/v1/erp/Need/js/apiNeed";
import EzSearch from "@/comps/form/EzSearch.vue";
import EzSearchConfig from "@/comps/form/EzSearchConfig";
import apiFlow from "@/pages/v1/flow/Flow/js/apiFlow";
import EzData from "@/comps/EzData.vue";
import FormBuilder from "@/comps/form/formBuilder";

export default {
  components: {EzData, EzSearch, TitleA, ViewCom},
  data() {
    let fb = FormBuilder()
    fb.setLabelPosition("right").setLabelWidth(0)
    fb.addSearch("flow", "", 12).setApi(apiFlow.urlChoice)
    return {
      id: 0,
      model: {},
      conf: fb,
      curTab: "start",
      flow: {},
      auth:false,
      updateKey:""
    }
  },
  mounted() {
    this.id = this.$route.query.id * 1
    this.getData()
  },
  methods: {
    getData() {
      apiNeed.find(this.id, res => {
        this.model = res.data
        if (this.model.flow > 0) {
          this.curTab = "flows"
          this.getFlow()
        } else {
          this.curTab = "start"
        }
        this.updateKey = Math.random()
        this.getAuth()
      })
    },
    getFlow() {
      apiFlow.findBy({
        _where: {id: this.model.flow},
        _dumps: [],
        page: 1, limit: 1,
      }, res => {
        this.flow = res[0]
      })
    },
    startApproval() {
      if (this.model.flow === 0) {
        this.$toast.error("请指定审批流程")
        return
      }
      this.$http.post("/erp/admin/Need/approval_start", {
        id: this.model.id,
        flowId: this.model.flow,
      }, res => {
        this.$toast.success("提交成功")
        this.getData()
      })
    },
    submit() {
      if (this.model.flow === 0) {
        this.$toast.error("请指定审批流程")
        return
      }
      this.$http.post("/erp/admin/Need/approval_submit", {
        id: this.model.id,
        flowCur: this.model.flowCur,
      }, res => {
        this.getData()
      })
    },
    getAuth() {
      this.$http.post("/erp/admin/Need/approval_auth", {
        id: this.id,
      }, res => {
        console.log(res)
        this.auth = res.data
        // if (this.auth.userAccess || this.auth.departmentAccess){
        //   this.curTab = "flows"
        // }else {
        //   this.curTab = "view"
        // }

        this.updateKey = Math.random()
      })
    }
  }
}
</script>

<style scoped>

</style>